<template>
	<view class="wrap">
		<view style="margin: 10rpx; text-align: right;">
			<u-button size="mini" type="error" style="margin-right:10px" @click="navTo('/pages/sys/workbench/index')">取消</u-button>
			<u-button size="mini" type="primary" style="margin-right:10px" @click="save()">保存</u-button>
		</view>
		<u-line color="darkgray" direction="row"/>
		<view class="search">
			<u-search v-model="keywords" @custom="search" @search="search"></u-search>
		</view>
		<view v-for="(item, index) in menuList" :key="index">
			<view class="workbench-title">{{item.label}}</view>
			<view class="toolbar">
				<u-grid class="grid" :col="4" :border="false" >
					<u-grid-item :index="idx" @click="addOrRemove(m.id,m.isCommonSetting,index,idx)"  v-for="(m, idx) in item.menuList" :key="idx">
						<view class="home-icon" :style="m.style">
							<i :class="m.source"></i>
						</view>
						<view class="grid-text">{{m.name}}</view>
						<i class="install-icon fjutfont fjut-jian" v-if="m.isCommonSetting"></i>
						<i class="addinstall-icon fjutfont fjut-jia" v-else></i>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
	
</template>
<script>
	
/**
 * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
 */
export default {
	
	data() {
		return {
			show: false,
			menuList: [],
			query: {},
			keywords: '',
		};
	},
	onLoad() {
		this.queryMenuList();
	},
	methods: {
		queryMenuList(){
			this.$u.api.menu.getRoute(this.query).then(res => {
				this.menuList=res.data;
			});
		},
		navTo(url) {
			uni.reLaunch({
				url: url
			});
		},
		search(value) {
			this.query.keywords=value;
			this.queryMenuList();
		},
		back(){
			uni.navigateBack();
		},
		addOrRemove(id,isCommonSetting,index,subIdx){
			//常用应用就删除，非常用应用点击后添加
			if(isCommonSetting){
				this.menuList[0].menuList[subIdx].isCommonSetting=false;
				this.menuList[0].menuList.splice(subIdx,1);
				for (let i=1 ; i < this.menuList.length; i++ ) {
					for (let j=0; j< this.menuList[i].menuList.length;j++) {
						if(this.menuList[i].menuList[j].id==id){
							this.menuList[i].menuList[j].isCommonSetting=false;
							return;
						}
					}
				}
			}else{
				this.menuList[index].menuList[subIdx].isCommonSetting=true;
				this.menuList[0].menuList.push(this.menuList[index].menuList[subIdx]);
			}
		},
		save(){
			let ids=[];
			for (let i=0; i< this.menuList[0].menuList.length;i++) {
				ids.push(this.menuList[0].menuList[i].id);
			}
			let params=ids.join(",");
			this.$u.api.commonMenu.save({ids:params}).then(res => {
				this.navTo("/pages/sys/workbench/index");
			});
		}
	}
};
</script>
<style lang="scss" scoped>
@import 'index.scss';
page {
	background-color: #ffffff;
}
.wrap .search{
	background: #ffffff;
}
.u-swiper-wrap{
	padding:0 10px;
}
.u-mode-light-info{
    background-color: #ffffff;
    color: #666666;
    border: 1px solid #e9ecf6;
	font-size: 12px;
	padding: 2px 8px;
	position: relative;
	top:-3px;
}
.workbench-title{
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	padding: 15px 30rpx;
}
 .home-icon i.icon-tongzhi{
	font-size: 22px;
 }
 .grid .u-grid-item{
	 position: relative;
	 .install-icon{
	 	position: absolute;
	 	top:-10px;
	 	right:50%;
		margin-right: -30px;
	 	color: #FE0100;
	 }
	 .addinstall-icon{
	 	position: absolute;
	 	top:-10px;
	 	right:50%;
	 	margin-right: -30px;
	 	color: #4285F4;
	 }
 }
 .icon{
	 background-color: white;
 }

</style>
